<template>
<div>
  <div class="menu-container" :class="{'fixed-menu': fixedMenu}">
    <content-container>
      <div class="flex menu-box">
        <el-image class="logo" src="/logo1.jpg" />
        <div class="logo-desc">专注企业文化建设16年<br/>企业长青DNA打造专业平台</div>
        <div class="flex-1"></div>
        <div class="links flex">
          <div v-for="(item, index) of menus" :key="index" class="flex-1 link">
            <nuxt-link class="link-el" :to="item.url">{{item.label}}</nuxt-link>
            <ul class="menu-child" v-if="item.children.length">
              <li v-for="(child, index2) of item.children" :key="'child-' + index2">
                <nuxt-link :to="child.url" class="child-link">{{child.label}}</nuxt-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="search">
          <input type="text">
          <i class="el-icon-search"></i>
        </div>
      </div>
    </content-container>
  </div>

</div>
</template>

<script>
import ContentContainer from './ContentContainer'
export default {
  name: 'PageMenu',
  components: {ContentContainer},
  data() {
    return {
      fixedMenu: false,
      menus: [
        {
          label: '首页',
          url: '/',
          children: []
        }, {
          label: '产品体系',
          url: '/product/teach-organization',
          children: [
            {
              label: '教导型组织',
              url: '/product/teach-organization'
            }, {
              label: '商圣弟子班',
              url: '/product/business-student'
            }
            // ,{
            //   label: '众智共享系统',
            //   url: '/product/share-knowlege'
            // }
          ]
        }, {
          label: '关于我们',
          url: '/about',
          children: [
            {
              label: '导师思想',
              url: '/about/think'
            },
            {
              label: '师道事迹',
              url: '/about/history'
            },
            {
              label: '公司介绍',
              url: '/about'
            },
            {
              label: '加入我们',
              url: '/about/join'
            }
          ]
        }, {
          label: '联系我们',
          url: '/contact',
          children: []
        }
      ]
    }
  },
  created() {

    if (typeof window !== 'undefined') {
      window.onscroll = () => {
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > 300) {
          this.fixedMenu = true
        }  else {
          this.fixedMenu = false
        }
      }
    }
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.menu-container{
  position: absolute;
  top:20px;
  width:100%;
  z-index: 100;
}
.fixed-menu{
  position: fixed;
  background: #fff;
  top: 0;
  border-bottom: 1px solid #ccc;
}

.menu-box{
  background-color: #fff;
  padding:10px 30px;
  border-radius: 10px;
}
.logo{
  width:5vw;
  min-width: 60px;
  height:auto;
}
.logo-desc{
  font-weight: bold;
  margin-left:20px;
}
.links{
  min-width:240px ;
  width: 30vw;
  max-width: 800px;
}
.link{
  color:#000;
  position: relative;
  .link-el{
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    margin: 0 2px;
  }
  .nuxt-link-exact-active{
    color: #fe8f00;
  }
}

.link-el:hover{
  color: $color-yellow;
}



.search{
  border:1px solid #ccc;
  padding:5px 10px;
  border-radius: 15px;
  margin-left:1vw;
  input{
    max-width: 200px;
    width: 10vw;
    border:none;
    outline: none;
  }
}

.link:hover .menu-child{
  display: block;
}
.menu-child:hover{
  display: block;
}

.menu-child{
  display: none;
  position: absolute;
  list-style: none;
  padding: 10px 1vw;
  background-color: $color-yellow;
  top: 15px;
  border-top:10px solid #fff;
  z-index: 10;
  .child-link{
    color: #000;
    text-decoration: none;
    line-height: 2;
  }
  .child-link:hover{
    color: #fff;
  }
}

</style>
